<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:head>
        <title>Touchdown Fantasy Football</title>
        <link href="css/global.css" rel="stylesheet" type="text/css" />
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="js/global.js"></script>
        <!-- jquery DataTable !-->
        <h:outputStylesheet name="../resources/DataTables-1.9.4/media/css/jquery.dataTables.css"/>
        <h:outputScript name="../resources/DataTables-1.9.4/media/js/jquery.js"/>
        <h:outputScript name="../resources/DataTables-1.9.4/media/js/jquery.dataTables.js"/>>
        <script language="javascript">
            $(document).ready(function(){
                $("[class$='dataTable']").dataTable();
                $("div.navy").load("navy.xhtml");
            });
        </script>
    </h:head>
    <h:body>
        <div id="background">
            <div class="navy">
            </div>
            <div id="content">
                <div id="userPanel">
                    <div id="news">
                        <img src="http://static.nfl.com/static/content/public/photo/2012/11/18/0ap1000000096981.jpg"/>
                    </div>

                    <div id="login">
                        <div id="loginHeader-left"></div>

                        <div id="loginHeader-mid">
                            <c:choose>
                                <c:when test="#{!empty accountBean.account}">
                                    <span id="loginHeader" class="whiteHeader">Fantasy Football</span>
                                </c:when>
                                <c:otherwise>
                                    <span id="loginHeader" class="whiteHeader">Login</span>
                                </c:otherwise>
                            </c:choose>
                        </div>
                        <div id="loginHeader-right"></div>
                        <c:choose>
                            <c:when test="#{!empty accountBean.account}">
                                <br/><br/><br/><br/>
                                <h:outputLabel id="panel_userName" value="#{accountBean.account.loginName}" /><br/>
                                <h:outputLabel id="panel_leagueName" value="#{accountBean.currentLeague.leagueName}" /><br/>

                                <h:form>
                                    <h:commandButton styleClass="short" id="loginbtn" action="#{accountBean.logout}" value="LogOut" />
                                </h:form>

                            </c:when>
                            <c:otherwise>
                                <div id="loginInput">
                                    <h:form>
                                        <table id="logintable">
                                            <tr>
                                                <td>
                                                    <span class="white">username</span>
                                                </td>
                                                <td>
                                                    <h:inputText id="username" value="#{accountBean.loginName}" />
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <span class="white">password</span>
                                                </td>
                                                <td>
                                                    <h:inputSecret id="password"  value="#{accountBean.password}" />
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <h:commandButton styleClass="short" id="loginbtn" action="#{accountBean.login}" value="Login" />
                                                </td>
                                                <td>
                                                    <h:commandButton styleClass="long" id="createAccountbtn" action="#{accountBean.createAccountPage}" value="Create Account"/>
                                                </td>
                                            </tr>
                                        </table>
                                    </h:form>
                                </div>
                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>
                <div id="RESEARCHANDTRENDS">
                    <span class="whiteHeader">RESEARCH AND TRENDS</span><br/><br/>
                    <f:view>
                        <h:form>
                            <h:dataTable class="dataTable" value="#{nflPlayerList.playersShort}" var="item">
                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value=""/>
                                    </f:facet>
                                    <h:graphicImage width="22px" height="30px" url="#{item.photoURL}"/>
                                </h:column>
                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="FirstName"/>
                                    </f:facet>
                                    <h:outputText value="#{item.firstName}"/>
                                </h:column>
                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="LastName"/>
                                    </f:facet>
                                    <h:outputText value="#{item.lastName}"/>
                                </h:column>
                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="Pos"/>
                                    </f:facet>
                                    <h:outputText value="#{item.position}"/>
                                </h:column>
                                <h:column>
                                    <f:facet name="header">
                                        <h:outputText value="Bye"/>
                                    </f:facet>
                                    <h:outputText value="#{item.byeweek}"/>
                                </h:column>
                            </h:dataTable>
                        </h:form>
                    </f:view>

                </div>
                <div id="LEADERBOARD">
                    <span class="whiteHeader">LEADERBOARD</span><br/><br/>
                    <table id="LEADERBOARDTABLE">
                        <tr>
                            <td>Rank</td>
                            <td>Team</td>
                            <td>Win%</td>
                            <td>Tot Pts</td>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>Armorbearers</td>
                            <td>80%</td>
                            <td>1234.58</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Armorbearers</td>
                            <td>80%</td>
                            <td>1234.58</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Armorbearers</td>
                            <td>80%</td>
                            <td>1234.58</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>Armorbearers</td>
                            <td>80%</td>
                            <td>1234.58</td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>Armorbearers</td>
                            <td>80%</td>
                            <td>1234.58</td>
                        </tr>
                        <tr>
                            <td>6</td>
                            <td>Armorbearers</td>
                            <td>80%</td>
                            <td>1234.58</td>
                        </tr>
                        <tr>
                            <td>7</td>
                            <td>Armorbearers</td>
                            <td>80%</td>
                            <td>1234.58</td>
                        </tr>
                        <tr>
                            <td>8</td>
                            <td>Armorbearers</td>
                            <td>80%</td>
                            <td>1234.58</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </h:body>
</html>
